<template>
  <div class="divBox relative">
    <el-card class="box-card">
      <el-row :gutter="20" style="min-height:50px; padding: 10px 30px 0px 30px;">
        <el-form :inline="true" size="medium">
          <el-row :gutter="20">
            <el-form-item>
              <el-button type="primary" @click="getCpcxStatis">查询</el-button>
            </el-form-item>
<!--            <el-form-item>-->
<!--              <el-button @click="sendCpcxSmsManual">发送自查提醒短信</el-button>-->
<!--            </el-form-item>-->
          </el-row>
        </el-form>
      </el-row>
    </el-card>
    <el-card class="box-card" style="margin-top: 20px;">
      <el-table
        :data="statTableData"
        style="width: 100%"
        v-loading="listLoading"
        size="small"
        :summary-method="getSummaries"
        show-summary
        :highlight-current-row="true"
        :header-cell-style=" {fontWeight:'bold'}"
      >
        <el-table-column
          type="index"
          width="50"
        >
        </el-table-column>
        <el-table-column
          prop="cityName"
          label="区域"
          width="160"
        >
        </el-table-column>
        <el-table-column
          prop="shouldEntNum"
          label="应完成企业苏"
        >
        </el-table-column>
        <el-table-column
          prop="finishEntNum"
          label="已完成企业数"
        >
        </el-table-column>
        <el-table-column
          label="未完成企业数"
        >
          <el-table-column
            label="重点领域企业数"
           >
            <template slot-scope="scope">
              <el-link type="primary" @click="getCpcxEntList(scope.row,'import')">
                {{ scope.row.unfinishKeydomainEntNum }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column
            label="其他领域企业数"
            >
            <template slot-scope="scope">
              <el-link type="primary" @click="getCpcxEntList(scope.row,'other')">
                {{ scope.row.unfinishOtherdomainEntNum }}
              </el-link>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          label="临期企业数"
        >
          <template slot-scope="scope">
            <el-link  type="primary" @click="getCpcxEntList(scope.row,'due')">
              {{ scope.row.dueEntNum }}
            </el-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="finishRate"
          label="完成率"
        >
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      title="未自查企业"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <el-table
        :data="dialogTableData.records"
        style="width: 100%;"
        size="small"
        :highlight-current-row="true"
        :header-cell-style=" {fontWeight:'bold'}"
      >
        <el-table-column
          type="index"
          width="50"
        >
        </el-table-column>
        <el-table-column
          prop="entFullName"
          label="企业名称"
        >
        </el-table-column>
        <el-table-column
          prop="cityName"
          label="行政区划"
        >
        </el-table-column>
        <el-table-column
          prop="industryTypeName"
          label="行业类别"
          width="90"
        >
        </el-table-column>
        <el-table-column
          prop="principal"
          label="联系人"
          width="90"

        >
        </el-table-column>
        <el-table-column
          prop="principalMphone"
          label="联系电话"

        >
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">返回</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
import { cpcxStatis, cpcxEntList, sendCpcxSms, sendSmsZcManual } from '@/api/safe'

export default {
  name: 'Cpcx',
  data() {
    return {
      statTableData: [],
      dialogVisible: false,
      dialogTableData: {
        records: [],
        current: 1
      },
      listLoading:false
    }
  },
  mounted() {
    this.getCpcxStatis()
  },
  methods: {
    getCpcxStatis(){
      this.listLoading=true
      cpcxStatis().then(res=>{
        console.info(res)
        this.listLoading=false
        this.statTableData=res
      }).catch(res=>{
        this.listLoading=false
        this.$message.error(res.message)
      })
    },
    getCpcxEntList(row,type){
      this.dialogVisible=true
      cpcxEntList(row.cityCode,type,this.dialogTableData.current).then(res=>{
        console.info(res)
        this.dialogTableData.current=res.current
        this.dialogTableData.records=res.records
        this.listLoading = false
      }).catch(res=>{
        this.listLoading = false
        this.$message.error(res.message)
      })
    },
    sendCpcxSmsManual(){
      sendCpcxSms("330285").then(res=>{
        this.$message.success("短信发送成功")
      }).catch(res=>{
        this.$message.error(res.message)
      })
    },
    getSummaries(param){
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
        } else {
          sums[index] = ' ';
        }
        if(index===7){
          var val=sums[3]/sums[2]*100
          console.info(sums[3])
          console.info(sums[2])
          sums[index]=val.toFixed(2)
        }
      });
      return sums;
    }
  }

}
</script>

<style scoped>

</style>
